<template>
  <div class="count">
    <h1>欢迎来到{{school}}学习{{subject}}</h1>
    <h2>当前的和为：{{sum}}</h2>
    <h2>当前的和放大10倍为：{{bigSum}}</h2>
    <h2>当前学校名变为大写：{{bigSchool}}</h2>
    <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="ADD(n)">+</button>
    <button @click="SUB(n)">-</button>
    <button @click="jiaIfOdd(n)">当前和为奇数再加</button>
    <button @click="jiaWait(n)">等一等再加</button>
    <button @click="jiaServer">问问服务器加几</button>
    <!-- <button @click="test">临时测试一下mapState怎么玩</button> -->
  </div>
</template>

<script>
  import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
  export default {
    name:'Count',
    data() {
        return {
            n:1
        }
    },
    methods: {
        // 靠我们自己一点点写方法，去联系mutations
        /* increment(){
          this.$store.commit('ADD',this.n)
        },
        decrement(){
          this.$store.commit('SUB',this.n)
        }, */

        // ...mapMutations({increment:'ADD',decrement:'SUB'}),
        ...mapMutations(['ADD','SUB']),



        ...mapActions(['jiaIfOdd','jiaWait','jiaServer'])
    },
    computed:{
      ...mapState(['school','subject','sum']),

      // 靠我们自己一点一点的写计算属性
      /* bigSum(){
        return this.$store.getters.bigSum
      },
      bigSchool(){
        return this.$store.getters.bigSchool
      } */

      // ...mapGetters({dahe:'bigSum',daxuexiao:'bigSchool'})
      ...mapGetters(['bigSum','bigSchool'])
    },
  }
</script>

<style scoped>
  .count {
    background-color: skyblue;
    padding: 20px;
  }
  button {
    margin-left: 10px;
  }
</style>